<template>
    <div id="header3-nav">

      <!--选择彩种-->
        <div class="select-lottery">
                <i class="glyphicon glyphicon-th-list"></i>
                <span>选择彩种</span>
        </div>

      <!--栏目-->
        <div class="right-menu">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="gameLive.html">比赛直播</a></li>
                <li><a href="openAward.html">开奖公告</a></li>
                <li><a href="gird.html">走势图表</a></li>
                <li @mouseover="showImage()" @mouseleave="hiddenImage1">
                    <i class="glyphicon glyphicon-phone"></i>
                    <a href="#" >手机购彩</a>
                </li>
                <li>
                    <div class="insert" ref="picture"  style="z-index: 9"></div>
                </li>
            </ul>
        </div>

    </div>
</template>

<script>
    export default {
        name: "header3-nav",
        data(){
          return {
            hide: null
          };
        },
        methods: {
            //显示图片
            showImage(){
                let div = this.$refs.picture;
                div.style.display = "block";
                div.style.left = "390px";
                div.style.top = "50px";
            },

           /* //隐藏图片
            hiddenImage(){
                let div = this.$refs.picture;
                div.style.display = "none";
            },*/

            /*//移入二维码时取消事件
            hideImage(){
                clearTimeout(this.hide);
            },*/

          //选择彩种消失图片
          hiddenImage1(){
                let picture = this.$refs.picture;
                this.hide = setTimeout(function () {
                picture.style.display = "none";
              }, 0);
          }
        }
    }
</script>

<style scoped>

/*导航栏总样式*/
#header3-nav{
    background: #e23a3a;
    line-height: 50px;
    width: 100%;
    height: 50px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
}

/*选择彩种样式*/
#header3-nav .select-lottery{
    background: #d62829;
    margin-left: 20px;
    float: left;
    width: 200px;
}

/*移入时候样式*/
#header3-nav .select-lottery:hover{
    cursor: pointer;
}

/*右侧栏目*/
#header3-nav .right-menu{
    float: left;
    margin-left: 96px;
    position: relative;
}

/*li样式*/
#header3-nav .right-menu ul li{
    float: left;
    margin-left: 30px;
    list-style-type: none;
}
#header3-nav .right-menu a{
   color: #fff;
}

/*a移入时候样式*/
#header3-nav .right-menu li:hover,
#header3-nav .right-menu a:hover {
    text-decoration: none;
    color: blue;
    transform: scale(2);
    transition: 3s ease;
}

/*插入图片*/
.insert{
    width: 150px;
    height: 200px;
    background: whitesmoke;
    position: absolute;
    display: none;
    background: url("../../assets/images/header2/twonum.png") no-repeat ;
  background-size: contain;
}

</style>
